; (function () {
    const template = `    <!--体育栏目-->
    <div>
        <ul>
            <li v-for="(sport,index) in sportArr" :key="sport.id">
                <!--<a href="#">世界杯开赛啦</a>-->
                <!--要动态拼接值, 则 to 属性值是 JS 表达式, 要写 JS 表达式,
                 则要使用 v-bind 方式绑定属性 注意 + 前面有单引号 '' -->
                <router-link :to="'/news/sport/detail/' + sport.id">
                  {{sport.title}} 
                </router-link>
            </li>
        </ul>
        <!--详情-->
        <router-view></router-view>
    </div>  `

    window.Sport = {
        template,
        data() {
            return {
                sportArr:[]
            }
        },
        created() {
            this.getSportArr()
        },
        methods: {
            getSportArr() {
                axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/db/sport.json')
                .then(response => {//function (response) {
                    console.log(response.data, this);
                    this.sportArr = response.data
                }).catch(error => {//function (error) { 
                    alert(error.message) 
                })
            }
        },
    }
})()